<template>
	<view class="morrow">
		<view class="nav">
			<view>
				<image :src="optimize.user.avatarUrl"></image>
				<view>Hi！{{optimize.user.nickName}}</view>
			</view>
			<view class="my" @click="headleMy">我的资料
			</view>
		</view>
		<view class="hint">
			距离本期（{{optimize.phase}}期）匹配结果公布还有{{announce_hours<10?'0'+announce_hours:announce_hours }}:{{announce_minutes<10?'0'+announce_minutes:announce_minutes}}:{{announce_seconds<10?'0'+announce_seconds:announce_seconds}}，您当前
			<view class="">匹配成功率较低</view>，使用「高级匹配」<view>可</view>
			<view>提升成功率至80%</view>
		</view>
		<view class="content">
			<view class="box">
				<view class="header">
					<view class="title">
						<view>高级匹配·立减金</view>
						<view v-if="optimize.status===0">
							{{exp_hours<10?'0'+exp_hours:exp_hours }}:{{exp_minutes<10?'0'+exp_minutes:exp_minutes}}:{{exp_seconds<10?'0'+exp_seconds:exp_seconds}}后过期
						</view>
						<view v-else>{{optimize.status===1?"已使用":optimize.status===2?"已过期":""}}</view>
					</view>
					<view class="money">{{optimize.reduction_price}}元</view>
				</view>
				<view class="hints">立减后{{optimize.after_reduction}}元，仅支持在当前页面可使用</view>
			</view>
			<view class="footer">
				<view class="btn" :class="{'activebtn':optimize.status>0}" @click="headlePayment(optimize.status)">
					{{optimize.status===0?"马上使用":optimize.status===1?"已使用":"已过期"}}，提升成功率至80%
				</view>
				<view>匹配失败可全额退款</view>
			</view>
		</view>

		<view v-if="show" class="warp">
			<view class="con">
				<image class="bg" src="../../static/image/lift.png"></image>
				<view>提升成功</view>
				<image class="ri" src="../../static/image/shut.png" @click="show=false"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				optimize: {},
				Time: null, //防抖
				show: false, //遮罩层
				exp_hours: 0,
				exp_minutes: 0,
				exp_seconds: 0,
				announce_hours: 0,
				announce_minutes: 0,
				announce_seconds: 0,
			}
		},
		onLoad() {
			this.getInfo()
		},
		methods: {
			getInfo() {
				this.$myRequesy({
					url: 'user/red-coupon'
				}).then(res => {
					if (res.code === 0) {
						// 立减金倒计时
						this.optimize = res.data
						this.exp_hours = res.data.exp_hours
						this.exp_minutes = res.data.exp_minutes
						this.exp_seconds = res.data.exp_seconds
						let time = res.data.exp_seconds
						let hours = res.data.exp_hours
						let min = res.data.exp_minutes
						let timer = setInterval(res => {
							if (time == 0) {
								time = 60
								if (min == 0) {
									min = 60
									hours--
									this.exp_hours = hours
								}
								min--
								this.exp_minutes = min
							}
							time--
							this.exp_seconds = time
						}, 1000)

						if (time === 0 && hours === 0 && min === 0) {
							clearInterval(timer)
						}

						// 公布时间
						this.announce_hours = res.data.announce_hours
						this.announce_minutes = res.data.announce_minutes
						this.announce_seconds = res.data.announce_seconds
						let time1 = res.data.announce_seconds
						let hours1 = res.data.announce_hours
						let min1 = res.data.announce_minutes

						let timer1 = setInterval(res => {
							if (time1 == 0) {
								time1 = 60
								if (min1 == 0) {
									min1 = 60
									hours1--
									this.announce_hours = hours1
								}
								min1--
								this.announce_minutes = min1
							}
							time1--
							this.announce_seconds = time1
						}, 1000)
						if (time1 === 0 && hours1 === 0 && min1 === 0) {
							clearInterval(timer1)
						}

					} else if (res.code === 1003) {
						window.location.href = 'http://cpnew.needyoutd.com/cph5/index.html'
					}
				})
			},

			headleMy() {
				uni.navigateTo({
					url: '../myprofile/myprofile'
				})
			},
			//微信支付
			headlePayment(state) {
				if (state === 0) {
					uni.showToast({
						title: "加载中",
						mask: true,
						icon: "loading"
					})
					let id = uni.getStorageSync('id')
					let that = this
					if (that.Time) {
						clearTimeout(that.Time)
					}
					that.Time = setTimeout(() => {
						that.$myRequesy({
							url: 'red-pay',
							method: "POST",
							data: {
								state: 1
							},

						}).then(res => {
							if (res.code === 0) {
								WeixinJSBridge.invoke(
									'getBrandWCPayRequest', {
										"appId": res.data.appId, //公众号ID，由商户传入     
										"timeStamp": res.data.timeStamp, //时间戳，自1970年以来的秒数     
										"nonceStr": res.data.nonceStr, //随机串     
										"package": res.data.package,
										"signType": res.data.signType, //微信签名方式：     
										"paySign": res.data.paySign //微信签名 
									},
									function(res1) {
										if (res1.err_msg == "get_brand_wcpay_request:ok") {
											// 使用以上方式判断前端返回,微信团队郑重提示：
											//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
											setImmediate(() => {
												that.$myRequesy({ //报名接口
													url: 'user/red-regis',
													method: "POST",
													data: {
														order_no: res.data
															.out_trade_no,
													}
												}).then(res => {
													if (res.code === 0) {
														that.getInfo()
													}

												})
											}, 1000)
											that.show = true
										}
									});
							}
						})
					}, 500)
				}

			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F6FE;
	}
</style>
<style lang="scss" scoped>
	.morrow {
		padding: 40upx;

		.nav {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 46upx;
			border-bottom: 2upx solid rgba(227, 222, 255, 100);

			view:first-child {
				display: flex;
				color: rgba(0, 0, 0, 0.8);
				font-size: 30upx;

				image {
					width: 42upx;
					height: 42upx;
					margin-right: 18upx;
					border-radius: 50%;
				}
			}

			.my {
				width: 140upx;
				height: 50upx;
				line-height: 50upx;
				border-radius: 40upx;
				background-color: rgba(255, 255, 255, 100);
				color: rgba(0, 0, 0, 0.5);
				font-size: 26upx;
				text-align: center;
				box-shadow: 2upx 0upx 2upx 0px rgba(255, 255, 255, 100);
				border: 2upx solid rgba(0, 0, 0, 0.05);
			}
		}

		.hint {
			margin: 40upx 0upx;
			color: rgba(0, 0, 0, 0.5);
			font-size: 28upx;

			view {
				display: inline;
			}

			view:first-child {
				color: #6755D7;
				font-weight: 600;
			}

			view:last-child {
				color: #FF8730;
				font-weight: 600;
			}

		}

		.content {
			width: 690upx;
			height: 530upx;
			border-radius: 20upx;
			background-color: rgba(255, 255, 255, 100);
			box-shadow: 0px 12upx 36upx 0px rgba(227, 222, 255, 100);
			padding: 40upx 40upx 30upx;

			.box {
				width: 590upx;
				height: 240upx;
				border-radius: 16upx;
				background-color: rgba(246, 244, 255, 100);
				color: rgba(16, 16, 16, 100);
				font-size: 28upx;
				font-family: Arial;
				border: 2upx solid rgba(176, 166, 255, 0.20);
				padding: 40upx 0upx 22upx;

				.header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: rgba(130, 113, 239, 75);
					font-size: 26upx;
					border-bottom: 2upx solid rgba(227, 222, 255, 100);
					padding: 0upx 38upx 30upx 32upx;

					.title {
						view:first-child {
							color: rgba(0, 0, 0, 0.8);
							font-size: 32upx;
							font-weight: 600;
							margin-bottom: 10upx;
						}
					}

					.money {
						color: rgba(103, 85, 215, 100);
						font-size: 36upx;
						font-weight: 600;
					}
				}

				.hints {
					padding: 20upx 30upx 0upx;
					color: rgba(0, 0, 0, 0.35);
					font-size: 24upx;
				}


			}

			.footer {
				margin-top: 72upx;
				text-align: center;
				color: rgba(0, 0, 0, 0.35);
				font-size: 28upx;

				.btn {
					width: 590upx;
					height: 88upx;
					line-height: 88upx;
					border-radius: 100upx;
					background-color: rgba(255, 135, 48, 100);
					color: rgba(255, 255, 255, 100);
					font-size: 30upx;
					text-align: center;
					font-weight: 600;
					margin-bottom: 20upx;
				}

				.activebtn {
					background-color: #999;
				}
			}
		}

		.warp {
			color: #fff;
			font-size: 28upx;
			background-color: rgba(0, 0, 0, 0.7);
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;

			.con {
				width: 100%;
				height: 500upx;
				position: relative;
				top: 272upx;

				.bg {
					width: 100%;
					height: 100%;
				}

				view {
					position: absolute;
					bottom: 70upx;
					left: 50%;
					transform: translateX(-50%);
					font-weight: 600;
				}

				.ri {
					width: 40upx;
					height: 40upx;
					position: absolute;
					top: 46upx;
					right: 180upx;
				}
			}

		}
	}
</style>
